/**
 * All rights Reserved, Designed By 信鸥科技
 * project : committee
 * Created by youquer on 17/10/25.
 * 注意：本内容仅限于信鸥科技有限公司内部传阅，禁止外泄以及用于其他的商业目的
 * Description:
 *
 */

//React
import React from 'react';
import PropTypes from 'prop-types';
//Dva
import { Link } from 'dva/router';
import { connect } from 'dva'
//antd
import { Form, Input, DatePicker, Row, Col, Tabs, Icon, Button, Card } from 'antd';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
//style
import styles from './AppAdd.less';
//common
import AddInput from '@/components/common/AddInput';

const AppAdd = ({app, dispatch}) => {
  /**
   * formItemLayout: 添加页输入框样式,
   * labelCol: 左侧标题 xs:24等分, sm: 宽
   * wrapperCol: 右侧标题 xs, sm: 宽; 数值越大越宽
   * */
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };

  const formItemTwoLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  /**
   * patrol:model数据
   * loading: 提交按钮加载效果
   * */
  const {type, isUpdate, code, name, isEnable, sort} = app;
  const data = app;

  /**
   * 一排多个输入框的间距
   * */
  const gutter = {gutter: 2};


  var inputcolumns = [];
  if (isUpdate == 1){ //修改
    inputcolumns = [
      {
        title: "应用编码",
        type:"Input",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        key: 'code',
      },
      {
        title: "名称",
        type:"Input",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        key: 'name',
      },
      {
        title: "排序",
        type:"InputNumber",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        key: 'sort',
      },
      {
        title: "可用",
        type:"Switch",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        checkedChildren: "是",
        unCheckedChildren: "否",

        key: 'isEnable',
      },
    ]
  } else { //添加
    inputcolumns = [
      {
        title: "应用编码",
        type:"Input",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "最多输入10位",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},
        max: 10,

        key: 'code',
      },
      {
        title: "名称",
        type:"Input",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "最多输入10位",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},
        max: 10,

        key: 'name',
      },
    ];
  }




  const param = {
    inputcolumns,
    type,
    data,
    gutter,
  };

  //提交按钮
  const addInfo = {code, name};
  const updateInfo = {isEnable, sort, code, name};
  function enterLoading(){
    dispatch({
      type:type+"/submit",
      loading:true
    });
    var act = "/add"; //添加
    if (isUpdate == 1){ //修改
      act = "/update";
      dispatch({
        type:type+ act,
        payload:updateInfo
      });
    } else {
      dispatch({
        type:type+ act,
        payload:addInfo
      });
    }
  }




  return(

    <PageHeaderLayout title={isUpdate? "修改应用" : "添加应用"} content="">
      <Card bordered={false}>
        <div className={styles.add_div}>
          <AddInput {...param} />
          <div className={styles.submit_div}>
            <Button type="primary" onClick={enterLoading}>
              确定
            </Button>
          </div>
        </div>
      </Card>
    </PageHeaderLayout>
  )
};

export default connect(
  ({app}) => ({app})
)(AppAdd);
